<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .grandpa{
            height: 500px;
            width: 500px;
            background-color: rgb(255, 196, 239);
            font-size: 50px;
            margin: 30px;
        }
        .son{
            height: 300px;
            width: 300px;
            background-color: rgb(255, 255, 196);
            font-size: 50px;
        }
        .grandson{
            height: 100px;
            width: 100px;
            background-color: rgb(245, 8, 8);
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="grandpa">
        洛璃
        <div class="son">
            洛水
            <div class="grandson">
                水璃
            </div>
        </div>
    </div>
    <script>
        let oDivGrandpa = document.querySelector(".grandpa"),
            oDivSon = document.querySelector(".son"),
            oDivGrandSon = document.querySelector(".grandson")

        oDivGrandpa.onclick = function(e){
            console.log(e);
        }
        oDivSon.onclick = function(e){
            console.log(e);
        }
        oDivGrandSon.onclick = function(e){
            //阻止事件冒泡
            e.stopPropagation()
            console.log(e);
        }
        /*
            事件冒泡
                一个事件连带父级事件一并触发
            阻止事件冒泡
                event.stopPropagation()
            阻止默认行为(a标签跳转之类的)  oncontextmenu默认菜单选项
                e.preventDefault()

            绑定事件
                节点.addEventListener("click",function(){

                })

            解绑事件对应的事件函数
                removeEventListener("click",函数名)
        */
    </script>
</body>
</html>